<script setup lang="ts">
import { toast } from "@climblee/uv-ui/libs/function";
import { reactive, ref, defineExpose } from "vue";
import {
  apiProductPage,
  searchHistoryList,
  searchHistoryRemove,
} from "@/apis/product";
import { useUserStore } from "@/stores/user";
import { onShow } from "@dcloudio/uni-app";

const emit = defineEmits([
  "search",
  {
    customEvent: (value) => {},
  },
]);

const userStore = useUserStore();

const searchList = reactive<any>({
  data: [],
});

const getSearchHistoryList = async () => {
  let res = await searchHistoryList({
    appUserId: userStore.userInfo.id,
  });
  if (res.code === 200) {
    searchList.data = res.data;
    Object.assign({}, res.data);
  }
};
const getSearchHistoryRemove = async () => {
  let res = await searchHistoryRemove({
    appUserId: userStore.userInfo.id,
  });
  if (res.code === 200) {
    toast("清空搜索记录成功！");
    searchList.data = [];
    Object.assign({}, { data: [] });
  }
};

const handleSearch = (item) => {
  //console.log("item: ", item.content);
  emit("search", item.content);
};

defineExpose({ getSearchHistoryList });

onShow(() => {
  getSearchHistoryList();
});
</script>
<template>
  <view>
    <view class="often-search margin-top-20 margin-bottom-20">
      <view class="flex flex-between">
        <text>最近搜索:</text>
        <view
          class="trash-search flex flex-align-center"
          @click="getSearchHistoryRemove"
        >
          <image src="../../static/images/trash-red.png" mode="scaleToFill" />
          <text>清空搜索记录</text>
        </view>
      </view>
    </view>
    <view class="search-list flex">
      <view
        v-for="(item, i) in searchList.data"
        :key="i"
        class="search-card card-tag flex flex-center"
        @click="() => handleSearch(item)"
        >{{ item.content }}</view
      >
      <!-- <view class="search-card card-tag flex flex-center">大石头</view>
      <view class="search-card card-tag flex flex-center">小石头222石头</view>
      <view class="search-card card-tag flex flex-center">红石头</view> -->
    </view>
  </view>
</template>
<style lang="scss">
.search-list {
  // justify-content: space-around;
  display: flex;
  flex-wrap: wrap;
}

.card-tag {
  width: auto;
  border-radius: 44rpx;
  padding: 8rpx 30rpx;
  border: 1px solid #bebebe;
  color: #bebebe;
  font-size: 24rpx;
  background: #ffffff;
  margin-top: 10rpx;
  margin-left: 10rpx;
}

.line {
  border-left: 0.5px solid #cecece;
  border-radius: 12px;
  writing-mode: vertical-lr;
  height: 40rpx;
}

.search {
  color: #c33e29;
  font-size: 28rpx;
  font-weight: 600;
}

.search-list {
}

.often-search {
  .trash-search {
    font-size: 28rpx;
    color: #c33e29;
    text {
    }

    image {
      margin-right: 10rpx;

      width: 33rpx;
      height: 33rpx;
    }
  }
}
</style>
